.centmid(){transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);}
.radar-layout{position: relative;margin: 0 auto;}
.radar-layout .out-line{position: absolute;left:50%;top:50%;.centmid();border-radius: 50%;    border: 1px solid rgba(237, 245, 251, .2);}
.radar-bd{position: absolute;overflow:hidden;top:50%;left:50%;.centmid();border-radius: 50%;}
.radar-bd .radar-content{position: absolute;background: #008ffe;border-radius: 50%;top:50%;left:50%;z-index:99;color: #fff;text-align: center;.centmid();overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp:1;}
.radar-bd .radar-line{.centmid();position: absolute;top:50%;left:50%;border-radius: 50%;border: 1px solid #cee7fc;}
.radar-bd .line-01{-webkit-box-sizing:border-box;}
.radar-bd .line-02{border-color:#e0eff9 }
.radar-bd .line-03{border-color:#e0eff9 }
.radar-shadow{position: absolute;top:50%;left:50%;border-radius: 50%;-webkit-animation:pulseShadow 1s 0s ease infinite;animation:pulseShadow 1s 0s ease infinite;}
.radar-sector-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(40deg);
  clip: rect(100px,100px,200px,0px);
  border-radius: 50%;
}
.radar-sector-1 .radar-sector-bg{transform: rotate(-140deg);}
.radar-sector,.radar-dian-layout{position: absolute;top:50%;left:50%;}
.radar-dian-layout{.centmid();}
.radar-sector-1{-webkit-animation:rotateShadow 1.5s 0s linear infinite;animation:rotateShadow 1.5s 0s linear infinite;}
.radar-sector-2{-webkit-animation:rotateShadow 2s 0s linear infinite;animation:rotateShadow 2s 0s linear infinite;}
@-webkit-keyframes pulseShadow{
  0%{-webkit-transform:scale(0);opacity:1;}
  100%{-webkit-transform:scale(1);opacity:0.1;}
}
@-webkit-keyframes pulseShadow2{
  0%{-webkit-transform:scale(0);opacity:0;}
  40%{-webkit-transform:scale(0);opacity:0;}
  70%{-webkit-transform:scale(1);opacity:1;}
  100%{-webkit-transform:scale(0);opacity:0;}
}
@-webkit-keyframes rotateShadow{
  0%{-webkit-transform: rotate(0deg);}
  100%{-webkit-transform: rotate(360deg);}
}


@keyframes pulseShadow{
  0%{transform:scale(0);opacity:1;}
  100%{transform:scale(1);opacity:0.1;}
}
@keyframes pulseShadow2{
  0%{transform:scale(0);opacity:0;}
  40%{transform:scale(0);opacity:0;}
  70%{transform:scale(1);opacity:1;}
  100%{transform:scale(0);opacity:0;}
}
@keyframes rotateShadow{
  0%{transform: rotate(0deg);}
  100%{transform: rotate(360deg);}
}

.radar-dian{position: absolute;width: 5px; height: 5px;border-radius: 50%;background:rgba(30, 150, 250, 0.56);opacity: 0}
.radar-dian-01{top:40%;left:60%;-webkit-animation:pulseShadow2 3s .2s ease infinite;animation:pulseShadow2 3s .2s ease infinite;}
.radar-dian-02{top: 34%;left: 30%;-webkit-animation:pulseShadow2 5s .8s ease infinite;animation:pulseShadow2 5s .8s ease infinite;}
.radar-dian-03{top:20%;left:80%;-webkit-animation:pulseShadow2 4s 1.2s ease infinite;animation:pulseShadow2 4s 1.2s ease infinite;}
.radar-dian-04{top:72%;left:12%;-webkit-animation:pulseShadow2 3.2s .5s ease infinite;animation:pulseShadow2 3.2s .5s ease infinite;}
.radar-dian-05{top:34%;left:10%;-webkit-animation:pulseShadow2 5.5s .9s ease infinite;animation:pulseShadow2 5.5s .9s ease infinite;}
.radar-dian-06{top:60%;left:89%;-webkit-animation:pulseShadow2 4.2s .4s ease infinite;animation:pulseShadow2 4.2s .4s ease infinite;}
.radar-dian-07{top:15%;left:46%;-webkit-animation:pulseShadow2 6s .6s ease infinite;animation:pulseShadow2 6s .6s ease infinite;}
.radar-dian-08{top:80%;left:45%;-webkit-animation:pulseShadow2 4.5s .7s ease infinite;animation:pulseShadow2 4.5s .7s ease infinite;}
.radar-sector-bg b{width: 100%;height: 1px;bottom: 50%;left: 0%;position: absolute;background:rgb(30, 150, 250);-webkit-transform: translate(0,1px) scaleY(.5);transform: translate(0,1px) scaleY(.5);}
